<template>
  <div class="shade" v-if="isShadeShow" data-aos="fade-left"></div>

  <div class="form" data-aos="fade-left" v-if="isShadeShow">
    <div class="form-title">
      消息详情
    </div>
    <div class="message">
      <div class="message-item">
        <div class="title">消息标题</div>
        <div class="content">
          收到一条
          <span v-if="approve_info.flow_type === 0">请假</span>
          <span v-if="approve_info.flow_type === 1">用印</span>
          <span v-if="approve_info.flow_type === 2">报销</span>
          流程消息,请及时查看
        </div>
      </div>
      <div class="message-item">
        <div class="title">发送人</div>
        <div class="content">
          系统
        </div>
      </div>
      <div class="message-item">
        <div class="title">发送时间</div>
        <div class="content">
          {{ computeDate(approve_info.created_at) }}
        </div>
      </div>
      <div class="message-item">
        <div class="title">收件人</div>
        <div class="content">
          {{ user_info.username }}
        </div>
      </div>
      <div class="message-item">
        <div class="title">消息内容</div>
        <div class="content">
          {{ content }}
          <span @click="checkDetail"> &nbsp;&nbsp;&nbsp;查看详情 </span>
        </div>
      </div>
    </div>
  </div>
  <div class="close-btn" @click="closeDetail" data-aos="fade-left" v-if="isShadeShow">
    <span>关</span>
    <span>闭</span>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue"
import emitter from "@/lib/eventBus.js"
import {getTime} from "@/lib/utils.js"
import {getTargetApprove} from "@/api/index.js"
import {computeDate} from "@/lib/utils.js"
import {useRouter} from "vue-router"

const router = useRouter()

//遮罩层
const isShadeShow = ref(false)
//用户信息
let user_info
//遮罩层
const users = ref([])
//时间戳
let now
//目标申请id
let targetId
const content = ref('')
// 消息id
let msg_id

let approve_info = reactive()

onMounted(()=>{
  getUserInfo()
  AOS.init()
  now = getTime()
})

//获取用户信息
const getUserInfo = () => {
  user_info = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const toggleDiaShow = async (id,con,msgId) => {
  try {
    const {data:res} = await getTargetApprove({
      approve_id:id
    })
    if (res.code === 200){
      approve_info = res.data
      msg_id = msgId
      isShadeShow.value = true
      targetId = id
      content.value = con
    }
  } catch (e) {
    console.log(e)
  }
}

const closeDetail = () => {
  isShadeShow.value = false
}

const checkDetail = () => {
  if(content.value.indexOf('审批') !== -1){
    router.push({
      path: '/to-handle',
      query: {
        targetId,
        msg_id
      }
    })
  } else if(content.value.indexOf('完成') !== -1){
    router.push({
      path: '/all-flows',
      query: {
        targetId,
        msg_id
      }
    })
  } else if(content.value.indexOf('抄送') !== -1){
    router.push({
      path: '/copy',
      query: {
        targetId,
        msg_id
      }
    })
  }
}

defineExpose({
  toggleDiaShow
})
</script>

<style scoped lang="less">
.shade{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 800;
  top: 8vh;
  left: 3vw;
  background-color: rgba(0,0,0,.7);
}
.form{
  position: absolute;
  top: 8vh;
  left: 26vw;
  z-index: 950;
  height: 92vh;
  width: 74vw;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(250, 250, 250);
  .form-title{
    text-align: left;
    font-size: 2.2vh;
    font-weight: 600;
    letter-spacing: 1px;
    padding-left: 2vh;
    margin-top: 1vh;
  }
  .message{
    background-color: #fff;
    width: 95%;
    margin: 3vh auto;
    .message-item{
      display: flex;
      justify-content: space-between;
      height: 5vh;
      border: 1px solid rgba(238, 238, 238);
      .title{
        width: 15%;
        border-right: 1px solid rgba(238, 238, 238);
        line-height: 5vh;
        text-align: center;
        box-sizing: border-box;
        background-color: rgba(250, 250, 250);
        font-weight: 600;
      }
      .content{
        background-color: #fff;
        width: 83%;
        line-height: 5vh;
        span{
          color: #1E90FF;
          &:hover{
            cursor:pointer;
          }
        }
      }
    }
  }
}
.close-btn{
  position: absolute;
  top: 23vh;
  left: 24vw;
  height: 9vh;
  width: 3.5vw;
  z-index: 899;
  background-color: rgba(255, 87, 34);
  margin: 1vh auto;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  color: white;
  flex-direction: column;
  padding-left: 0.5vw;
  align-items: start;
  font-size: 1.6vh;
  &:hover{
    cursor: pointer;
  }
}
:deep(.el-form-item--default .el-form-item__content) {
  line-height: 32px;
  height: 8vh;
  background-color: #fff;
}
</style>